<template>
	<view class="content">
		<!-- 案件标题 -->
		<view class="case-title">
			<u-input class="case-title-editor" v-model="current_case.title" type="textarea" placeholder="标题" />
			<view class="case-title-tip">
				在列表<view class="current-phase">准备阶段</view>中
			</view>
		</view>

		<view class="info-item case-base-info">
			<view class="info-label">
				<u-icon name="home" size="40" color="gray" />
			</view>
			<view class="info-editor"> 基本信息 </view>
		</view>

		<!-- 案件描述 -->
		<view class="case-desc">
			<u-input class="case-desc-editor" v-model="current_case.desc" type="textarea" placeholder="案件描述" />
		</view>
		<u-line />

		<!-- 标签列表 -->
		<view class="info-item tag-list">
			<view class="info-label">
				<u-icon name="tags" size="40" color="gray" />
			</view>
			<view class="info-editor">
				<com-tag-editor :caseObj="current_case" />
			</view>
		</view>

		<!-- 接下来的任务 -->
		<view class="info-item task-ahead">
			<!-- 任务图标 -->
			<view class="info-label">
				<u-icon name="list-dot" size="40" color="gray" />
			</view>
			<!-- <view class="info-editor"> 接下来的任务 </view> -->
			<biz-task-list :caseObj="current_case" />
		</view>

		<!-- 附件列表 -->
		<view class="active-item attachments">
			<view class="info-label">
				<u-icon name="attach" size="40" color="gray" />
			</view>
			<com-attach-editor :caseObj="current_case" />
		</view>

		<!-- 评论列表 -->
		<view class="active-item comments">
			<biz-case-comment :caseObj="current_case" />
		</view>

		<!-- popup menu -->
		<view @click="showMenu">click me</view>
		<chunLei-popups v-model="show_modal" :popData="pop_data" @tapPopup="onTapPopup" :x="0" :y="0" placement="top-end">
		</chunLei-popups>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex";
	import bizTaskList from "../biz-task-list/biz-task-list.vue";

	export default {
		components: {
			bizTaskList
		},
		data() {
			return {
				show_modal: false,
				pop_data:['a','b','c']
			};
		},
		computed: {
			...mapState({
				current_case: (state) => state.caseDetail.current_case,
			}),
		},
		methods: {
			showMenu() {
				this.show_modal = true
			},
			onTapPopup(){
				console.log(">>>")
			}

		},
	};
</script>

<style scoped lang="scss">
	.edit-eara {
		padding: 1px;
	}

	.item-base {
		min-height: 96rpx;
		display: flex;
		align-items: center;

		border-bottom: #e0e0e0 solid 1rpx;
	}

	// 编辑信息项目
	.info-item {
		@extend .item-base;

		.info-label {
			width: 96rpx;
			display: flex;
			justify-content: center;
		}

		.info-editor {
			display: flex;
			align-items: center;
		}
	}

	// 附件和互动项目
	.active-item {
		@extend .item-base;

		.info-label {
			width: 96rpx;
			display: flex;
			justify-content: center;
		}
	}

	.content {
		background-color: $uni-bg-color-grey;

		.case-title {
			@extend .edit-eara;

			background-color: #0088f8;
			min-height: 200rpx;

			word-wrap: break-word;
			white-space: normal;
			word-break: normal;

			.case-title-editor {
				color: $uni-text-color-inverse;
			}

			.case-title-tip {
				font-size: x-small;
				display: flex;
				flex-direction: row;

				.current-phase {
					font-size: x-small;
					margin: 0rpx 12rpx;
					color: $uni-bg-color;
				}
			}
		}

		.case-base-info {
			@extend .edit-eara;
		}

		.case-desc {
			padding: 12rpx;
			background-color: white;
		}

		.tag-list {
			@extend .edit-eara;
		}

		.task-ahead {
			@extend .edit-eara;
		}

		.attachments {
			@extend .edit-eara;
		}

		.comments {
			@extend .edit-eara;
			background-color: $uni-bg-color;
		}
	}
</style>
